<script lang="ts" setup>
import {IForm} from '@/interface/form'
import {onMounted, reactive, ref} from 'vue'
import Api from '@/api'
import {ElMessage} from 'element-plus'
import {deconstruction} from '@/utils/utils.ts'

const emit = defineEmits(['success'])
const props = defineProps({
	hideDialog: {
		type: Function,
		default() {
			return () => {
			}
		}
	},
	title: {
		type: String,
		default: 'add'
	},
	row: {
		type: [Object, String],
		default: () => {
			return ''
		}
	},
	parentList: {
		type: [Array, Object],
		default: () => {
			return []
		}
	},
	parentId: {
		type: [Number, String],
		default: () => {
			return ''
		}
	},
	dictData: {
		type: Object,
		default: () => {
			return {}
		}
	}
})
let parentData = reactive([
	{
		name: '主类目',
		id: 0,
		parentId: 0,
		children: [] as any
	}
])

const showHide = () => {
	return form.value.data.menuType !== 'F'
}

const menuShowHide = () => {
	return form.value.data.menuType === 'C'
}

parentData[0].children = props.parentList
const rows = ref()
const form = ref<IForm>({
	data: {
		parentId: '',//上级菜单
		menuName: '',//菜单名称
		menuType: 'C',//菜单类型
		icon: '',//菜单图标
		orderNum: 0,//显示排序
		isFrame: '1',//是否外链0是1否
		component: '',//组件路径
		path: '',//路由地址
		perms: '',//权限字符
		query: '',//路由参数
		isCache: '0',//是否缓存 0缓存1不缓存
		visible: '0',//显示状态,0显示1不显示
		status: '0'
	},
	otherConfig: {
		labelWidth: '80px'
	},
	config: [
		{
			col: 24,
			component: 'el-tree-select',
			name: '上级菜单',
			bind: 'parentId',
			trigger: 'change',
			isHide: false,
			attr: {
				'node-key': 'id',
				data: parentData,
				'check-strictly': true,
				props: {
					children: 'children',
					label: 'name'
				}
			},
			required: '请选择上级菜单',
			methods: {}
		},
		{
			component: 'ElRadioGroup',
			col: 12,
			name: '菜单类型',
			bind: 'menuType',
			dictList: props.dictData.menuType,
			dictProps: {
				value: 'dictValue',
				label: 'dictLabel'
			}
		},
		{
			col: 12,
			component: 'ElRadioGroup',
			name: '是否外链',
			bind: 'isFrame',
			showHide: showHide,
			dictList: props.dictData.isFrame,
			dictProps: {
				value: 'dictValue',
				label: 'dictLabel'
			},
			needToolTip: {
				content: '选择是外链则路由地址需要以`http(s)://`开头'
			}
		},
		{
			col: 12,
			component: 'customSlot',
			name: '菜单图标',
			showHide: () => {
				return form.value.data.menuType !== 'F'
			},
			bind: 'icon',
			needToolTip: {
				content: '参考(https://element-plus.gitee.io/zh-CN/component/icon.html, https://icones.js.org/collection/all, https://icon-sets.iconify.design)图标网址'
			}
		},
		{
			component: 'ElInputNumber',
			col: 12,
			name: '显示排序',
			bind: 'orderNum',
			required: '请选择排序',
			trigger: 'change',
			attr: {
				'controls-position': 'right',
				min: 0
			}
		},
		{
			component: 'ElInput',
			col: 12,
			name: '菜单名称',
			bind: 'menuName',
			required: '请输入菜单名称',
			trigger: 'blur'
		},
		{
			col: 12,
			component: 'ElInput',
			name: '路由地址',
			bind: 'path',
			showHide: () => {
				return form.value.data.menuType !== 'F'
			},
			required: '请输入路由地址',
			trigger: 'blur',
			needToolTip: {
				content: '访问的路由地址，如：`user`'
			}
		},
		{
			col: 12,
			component: 'ElInput',
			name: '组件路径',
			showHide: menuShowHide,
			bind: 'component',
			required: '请输入组件路径',
			trigger: 'blur',
			needToolTip: {
				content: '访问的组件路径，如：`system/user/index`，默认在`views`目录下'
			}
		},
		{
			col: 12,
			component: 'ElInput',
			name: '权限字符',
			bind: 'perms',
			showHide: () => {
				return form.value.data.menuType !== 'M'
			},
			needToolTip: {
				content: '用来控制页面按钮权限例如menu:add'
			}
		},
		{
			col: 12,
			component: 'ElInput',
			name: '路由参数',
			bind: 'query',
			showHide: menuShowHide
		},
		{
			col: 12,
			component: 'ElRadioGroup',
			name: '是否缓存',
			bind: 'isCache',
			showHide: menuShowHide,
			dictList: props.dictData.isCache,
			dictProps: {
				value: 'dictValue',
				label: 'dictLabel'
			},
			needToolTip: {
				content: '页面是否缓存,页面name要与路由地址名字保持一致'
			}
		},
		{
			col: 12,
			component: 'ElRadioGroup',
			name: '显示状态',
			showHide: showHide,
			bind: 'visible',
			dictList: props.dictData.visible,
			dictProps: {
				value: 'dictValue',
				label: 'dictLabel'
			},
			needToolTip: {
				content: '选择隐藏则路由将不会出现在侧边栏'
			}
		},
		{
			col: 12,
			component: 'ElRadioGroup',
			name: '菜单状态',
			bind: 'status',
			dictList: props.dictData.menStatus,
			dictProps: {
				value: 'dictValue',
				label: 'dictLabel'
			}
		}
	]
})
//编辑
onMounted(() => {
	if (props.title === 'edit') {
		rows.value = JSON.parse(JSON.stringify(props.row))
		form.value.data = deconstruction(form.value.data, rows.value)
	} else if (props.title === 'add') {
		form.value.data.parentId = props.parentId
	}
})
const baseFormRef = ref()

//保存数据
const submit = async () => {
	const flag = await baseFormRef.value.validate()
	if (!flag) return
	const params = {
		...form.value.data
	}
	const url = props.title === 'edit' ? await Api.menuTree : await Api.menuTree
	if (props.title === 'edit') {
		params.menuId = rows.value.id
	}
	url(params).then((res: any) => {
		if (res.code === 200) {
			ElMessage({
				message: props.title === 'edit' ? '编辑成功' : '新增成功',
				type: 'success'
			})
			props.hideDialog()
			emit('success')
		}
	})
}
</script>

<template>
	<el-dialog
		:close-on-click-modal="false"
		:close-on-press-escape="false"
		:title="title === 'edit' ? '编辑菜单' : '新增菜单'"
		destroy-on-close
		model-value
		top="10vh"
		width="900px"
		@close="hideDialog"
	>
		<BaseForm ref="baseFormRef" v-model="form.data" :form-config="form">
			<template #icon>
				<div class="fl-ac fl" style="width: 100%">
					<el-input v-model="form.data.icon"/>
					<BaseIcon v-if="form.data.icon" :icon="form.data.icon"/>
				</div>
			</template>
		</BaseForm>
		<template #footer>
			<el-button @click="hideDialog">取 消</el-button>
			<el-button type="primary" @click="submit">确 定</el-button>
		</template>
	</el-dialog>
</template>

<style lang="scss" scoped>

</style>
